<template>
	<view class="album_wrap" v-if="album.cover">
		<!-- 专辑背景开始 -->
		<view class="bg_wrap" @click="showimg">
			<view class="bg_image">
					<image :src="album.cover" mode=""></image>
				<view class="bg_name">
					{{album.name}}
				</view>
				<view class="bg_title">
					关注专辑
				</view>
			</view>
			
		</view>
		<!-- 专辑背景结束 -->
		<!-- 用户信息开始 -->
		<view class="user_wrap">
			<view class="user_info">
				<image :src="album.user.avatar" mode="widthFix"></image>
				<view class="user_name">
					<text>{{album.user.name}}</text>
				</view>
					
			</view>
			<view class="user_desc">
				<text>{{album.desc}}</text>
			</view>
		</view>
		<!-- 用户信息结束 -->
	</view>
</template>

<script>
	import request from '../../JS/request.js'
	export default{
		data(){
			return{
				id:"",
				params:{
					limit:30,
					order:"new",
					skip:0,
					first:1
				},
				album:{}
			}
		},
		methods:{
			async getList(){
				let data = await request({
					url:`http://service.picasso.adesk.com/v1/wallpaper/album/${this.id}/wallpaper?limit=30&order=new&skip=2`,
					data:this.params
				})
				this.album = data.data.res.album
				console.log(data)
				
			},
			//查看图片
			showimg(){
				wx.previewImage({
					current:this.album.cover,
					urls:[this.album.cover]
				})
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getList()
			
			
		}
		
	}
</script>

<style lang="scss">
	.bg_wrap{
		position: relative;
		.bg_name,.bg_title{
			position: absolute;
			color: #FFFFFF;
			bottom: 20rpx;
			font-weight: bold;
		}
		.bg_name{
			left:0;
			font-size: 40rpx;
			text-indent: 1em;
			text-shadow: 0 0 10rpx pink;
		}
		.bg_title{
			right: 20rpx;
			padding: 10rpx 20rpx;
			border-radius: 5rpx;
			background-color: #E93B81;
		}
	}
	
	/*用户信息*/
	.user_wrap{
		padding: 15rpx;
		.user_info{
			display: flex;
			justify-content: space-between;
		
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
				box-shadow: 0 0 10rpx skyblue;
			}
			.user_name{
				color: black;
				font-weight: bold;	
				width: calc(100vw - 80rpx);
				text-align: left;
				text-indent: 1em;
			}
		}
		.user_desc{
			padding-top: 15rpx;
		}
	}
	 /*用户信息*/ 
</style>
